// src/styles/rem.scss
@use 'sass:math';

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  overflow-y: auto;
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

#app {
  width: 100%;
  height: 100%;
  overflow: auto;
}

// 添加路由过渡动画
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

// 夜间模式下的图片亮度调整
.dark-mode-image-fix {
  transition: filter 0.3s ease;
}

html.dark .dark-mode-image-fix {
  filter: brightness(0.85);
}

// 设计稿基准尺寸
$base-design-width: 375 !default;

// px转rem函数
@function px2rem($px) {
  @return math.div($px, $base-design-width) * 10rem;
}

// 媒体查询隔离PC样式
@media screen and (min-width: 769px) {
  :root {
    font-size: 16px !important; // PC端固定基准
  }
}

@media screen and (max-width: 768px) {
  :root {
    font-size: calc(100vw / ($base-design-width/100)); // 移动端动态计算
  }
}



// 为CEF浏览器添加全局样式
// body.cef-browser {
  // 修复表单元素高度问题
  // .el-input,
  // .el-input__wrapper,
  // .el-input__inner,
  // .el-input-number,
  // .el-input-number__decrease,
  // .el-input-number__increase,
  // .el-date-editor,
  // .el-date-picker__editor-wrap,
  // .el-range-editor,
  // .el-range-input,
  // .el-button {
  //   max-height: 32px !important;
  //   height: 32px !important;
  //   line-height: 32px !important;
  //   box-sizing: border-box !important;
  // }

  // // 修复表格高度问题
  // .el-table th.el-table__cell,
  // .el-table td.el-table__cell {
  //   height: auto !important;
  //   line-height: 1.5 !important;
  //   padding: 8px !important;
  // }

  // // 修复按钮中的文本和图标垂直居中
  // .el-button {
  //   display: inline-flex !important;
  //   align-items: center !important;
  //   justify-content: center !important;
  //   line-height: 1 !important;
  // }

  // // 修复复选框垂直对齐
  // .el-checkbox__input {
  //   vertical-align: middle !important;
  // }

  // 修复表单项容器
  // .el-form-item {
  //   margin-right: 0 !important;
  //   margin-bottom: 0 !important;
    
  //   .el-form-item__content {
  //     height: 32px !important;
  //     max-height: 32px !important;
  //     overflow: visible !important;
  //   }
  // }

  // 原生下拉框样式修复
//   .native-select-wrapper {
//     height: 32px !important;
//     max-height: 32px !important;
//     overflow: visible !important;
    
//     .native-select {
//       height: 32px !important;
//       max-height: 32px !important;
//       line-height: 32px !important;
//       padding: 0 30px 0 12px !important;
//       box-sizing: border-box !important;
//       background-color: #ffffff !important;
//       color: #606266 !important;
//       border: 1px solid #dcdfe6 !important;
//       border-radius: 4px !important;
//     }
    
//     .native-select-arrow,
//     .native-select-clear {
//       height: 32px !important;
//       display: flex !important;
//       align-items: center !important;
//       justify-content: center !important;
//     }
//   }
  
//   // 与Element Plus表单元素融合
//   .el-form-item .native-select-wrapper {
//     width: 100% !important;
//   }

//   // 原生数字输入框在CEF浏览器中的样式优化 
//   .native-input-number-wrapper {
//     height: 32px !important;
//     max-height: 32px !important;
//     overflow: visible !important;
    
//     .native-input-number {
//       height: 32px !important;
//       max-height: 32px !important;
//       line-height: 32px !important;
//       padding: 0 30px 0 12px !important;
//       box-sizing: border-box !important;
//       background-color: #ffffff !important;
//       color: #606266 !important;
//       border: 1px solid #dcdfe6 !important;
//       border-radius: 4px !important;
//     }
    
//     .native-input-number-controls {
//       height: 32px !important;
//       width: 22px !important; 
//     }
    
//     .native-input-number-increase,
//     .native-input-number-decrease {
//       display: flex !important;
//       align-items: center !important;
//       justify-content: center !important;
//     }
    
//     .native-input-number-clear {
//       height: 32px !important;
//       display: flex !important;
//       align-items: center !important;
//       justify-content: center !important;
//     }
//   }
  
//   // 去除原生number输入框的上下箭头
//   input[type=number]::-webkit-inner-spin-button, 
//   input[type=number]::-webkit-outer-spin-button { 
//     -webkit-appearance: none !important; 
//     margin: 0 !important; 
//   }
  
//   input[type=number] {
//     -moz-appearance: textfield !important;
//   }
  
//   // 与Element Plus表单元素融合
//   .el-form-item .native-input-number-wrapper {
//     width: 100% !important;
//   }
// }

// 添加下拉框黑色边框修复代码
// body.cef-browser {
  // 只修复黑色边框问题
  // .el-popper, 
  // .el-select-dropdown {
  //   --el-popover-border-color: transparent !important;
    
  //   .el-popper__arrow {
  //     display: none !important;
  //     visibility: hidden !important;
  //     opacity: 0 !important;
  //   }
  // }
// }
